﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>本例用于测试background-repeat属性</title>
<style type="text/css">
#body1{
	display:block;
	float:none;
	width:100%;
	height:auto;
	overflow:hidden;
	*padding-bottom:20px;
}

.bgc{
float:left;
width:200px;
height:100px;
margin:20px;
padding:10px;
border:2px fuchsia solid;
	}
.mgd{
	float:left;
	width:200px;
	height:100px;
	margin:20px;
	padding:10px;
	border:2px fuchsia solid;
	overflow:auto;
}
#body2{
	display:block;
	float:none;
	width:100%;
	height:auto;
	overflow:hidden;
	*padding-bottom:20px;
}
#body2 div{
	float:left;
	width:200px;
	height:100px;
	margin:20px;
	padding:10px;
	border:2px green solid;
	background-image:url('images/eg_bg_03_small.gif');
}
#bg1{
}
#bg2{
	background-repeat:repeat-x;
}
#bg3{
	background-repeat:repeat-y;
}
#bg4{
	background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="body1">
<div class="bgc">本例用于测试background-repeat属性</div>
</div>
<div id="body2">
	<div id="bg1">默认背景图像在水平和垂直方向上重复，即repeat</div>
	<div id="bg2">在水平上重复：repeat-x</div>
	<div id="bg3">在垂直上重复：repeat-y</div>
	<div id="bg4">强制不重复</div>
	<div id="bg5">值inherit不建议使用，IE不支持</div>
</div>
<div>默认地，背景图像在水平和垂直方向上重复。</div>
</body>
</html>